<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css">
</head>

<body>
    <div class="constainer">
        <div id="app">
            <router-view></router-view>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script src="./axios.min.js"></script>
    <script>


        const nodePanel = {
            template: `
        <div class="panel panel-default">
          <nodePanelHeader></nodePanelHeader>
          <router-view></router-view>
        </div>
        `
        }
        const nodePanelHeader = {
            template: `
              <div class="panel-heading">
                <ul class="nav nav-pills">
                  <router-link tag='li' :to="{name:'tab',params:{tab:'all'}}"><a>精华</a></router-link>
                  <router-link tag='li' :to="{name:'tab',params:{tab:'good'}}"><a>全部</a></router-link>
                  <router-link tag='li' :to="{name:'tab',params:{tab:'share'}}"><a>分享</a></router-link>
                  <router-link tag='li' :to="{name:'tab',params:{tab:'ask'}}"><a>问答</a></router-link>
                  <router-link tag='li' :to="{name:'tab',params:{tab:'job'}}"><a>招聘</a></router-link>
                  <router-link tag='li' :to="{name:'tab',params:{tab:'dev'}}"><a>测试</a></router-link>

                </ul>
            </div>
        `
        }
        const nodeList = {
            template: `
            <ul class="list-group">
                <nodeItem v-for='(topic,index) in topics' :key='index' :topic=topic></nodeItem>
            </ul>
            `,
            data (){
                return {
                    topics:[]
                }
            },
            watch:{
                '$route':{
                    handler (to){
                     const  tab = to.params.tab
                      axios.get('https://cnodejs.org/api/v1/topics',{
                          params:{
                              tab:tab,
                              limit:10
                          }
                      }).then(res =>{
                          this.topics = res.data.data
                      })
                    },
                    immediate:true 
                }

            }
        }
        const nodeItem = {
            template:`
            <router-link tag="li" :to="{name: 'topic', params: {id: topic.id}}" class="list-group-item">
            {{topic.title}}
            <span class="label label-info">{{topic.tab}}</span>
            </router-link>
            `,
            props:{
                topic:Object
            }
        }
        Vue.component('nodePanelHeader',nodePanelHeader)
        Vue.component('nodeItem',nodeItem)
        const routes = [{
          path:'/',
          component:nodePanel,
          redirect:'/all',
          children:[{
              path:':tab',
              name:'tab',
              component:nodeList
          }, {
        path: '/topic/:id', // 表示对应文章id的详情页
        name: 'topic',
   
      }
          ]
        }
        ]
        const router = new VueRouter({
            routes,
            linkExactActiveClass: 'active'
        })
        const app = new Vue({
            el: '#app',
            router
        })
    </script>
</body>

</html>